<template>
  <div class="reportForm">
    <div class="container">
      <!--树-->
      <div class="tree">
        <el-tree :data="data" @node-drag-start="handleDragStart" @node-drag-enter="handleDragEnter"
          @node-drag-leave="handleDragLeave" @node-drag-over="handleDragOver" @node-drag-end="handleDragEnd"
          @node-drop="handleDrop" draggable :allow-drop="allowDrop" :allow-drag="allowDrag" default-expand-all
          node-key="id" ref="tree" highlight-current :props="defaultProps">
        </el-tree>
      </div>
      <!--表格-->
      <div class="form">
        <!-- <SpreadJs /> -->
        <Test />
      </div>
      <!--表格扩展-->
      <div class="formExp">表格扩展</div>
    </div>
  </div>
</template>

<script>
  import SpreadJs from '../spreadJs'
  import Test from './test'
  export default {
    components: {
      SpreadJs,
      Test
    },
    data() {
      return {
        data: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        columns: [{
          display: "报表编号",
          name: "rptNum",
          width: "20%",
          align: "left"
        }, {
          display: "报表名称",
          name: "rptNm",
          width: "30%",
          align: "left"
        }, {
          display: "报表类型",
          name: "templateType",
          width: "15%",
          render: (data, row, context, it) => {
            if ("01" == context) {
              return "明细报表";
            } else if ("02" == context) {
              return "单元格报表";
            } else if ("03" == context) {
              return "综合报表"
            } else if ("04" == context) {
              return "指标列表（纵）";
            } else if ("05" == context) {
              return "指标列表（横）";
            } else if ("06" == context) {
              return "交叉列表";
            } else {
              return "未知";
            }
          }
        }, {
          display: "创建时间",
          name: "createTime",
          width: "30%",
          type: 'date',
          format: 'yyyy-MM-dd hh:mm:ss'
        }]
      };
    },
    methods: {
      handleDragStart(node, ev) {
        console.log('drag start', node);
      },
      handleDragEnter(draggingNode, dropNode, ev) {
        console.log('tree drag enter: ', dropNode.label);
      },
      handleDragLeave(draggingNode, dropNode, ev) {
        console.log('tree drag leave: ', dropNode.label);
      },
      handleDragOver(draggingNode, dropNode, ev) {
        console.log('tree drag over: ', dropNode.label);
      },
      handleDragEnd(draggingNode, dropNode, dropType, ev) {
        console.log('tree drag end: ', dropNode && dropNode.label, dropType);
      },
      handleDrop(draggingNode, dropNode, dropType, ev) {
        console.log('tree drop: ', dropNode.label, dropType);
      },
      allowDrop(draggingNode, dropNode, type) {
        if (dropNode.data.label === '二级 3-1') {
          return type !== 'inner';
        } else {
          return true;
        }
      },
      allowDrag(draggingNode) {
        return draggingNode.data.label.indexOf('三级 3-2-2') === -1;
      }
    }
  };
</script>

<style scoped lang="less">
  .reportForm {
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-sizing: border-box;

    .container {
      width: 1206px;
      min-height: 100vh;
      margin: auto;
      display: flex;
      /* padding-top: 20px; */

      .tree {
        width: 350px;
      }

      .form {
        flex: 1;
        overflow: hidden;
      }

      .formExp {
        width: 300px;
        display: none;
      }
    }
  }
</style>